<%@ page contentType="text/html;charset=UTF-8" %>
<script src="${ownStatic}/webupload/webuploader.min.js"></script>
<style>
.webuploader-element-invisible{
    position: absolute;
    opacity: 0;
}
.head{
	height:130px;
	width:130px;
	background:#eee;
	border-radius: 50%;
}
.thumbnail{
border:none;
padding:0;
}

 .plist{position:relative;overflow:hidden;} 

.filePicker{
    background-color: #1ab394;
    border-color: #1ab394;
    color: #FFF;
    width:90px;
    height:28px;
    line-height:30px;
    text-align:center;
    margin-top:10px;
    border-radius:3px;
}
.filePicker:hover{
	background:#18a689;
	border-color:#18a689;
}


</style>

	<div id="fileList"  class="plist head uploader-list">
        <div class="file-item thumbnail">
            <img src="${ownStatic}/images/default_headimg.jpg">
        </div>
    </div>

<script>
$(function(){
	var $list = $('.plist');
	uploader = WebUploader.create({

	    // 选完文件后，是否自动上传。
	    auto: true,

	    // 文件接收服务端。
	    server: 'http://webuploader.duapp.com/server/fileupload.php',

	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '.filePicker',

	    // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif'
	    },
		duplicate :true
	});
	//当有文件添加进来的时候

	uploader.on( 'fileQueued', function( file ) {
	    if($list.find('.file-item').length==0||$list.html()==''){
	        var $li = $(
	                        '<div id="' + file.id + '" class="file-item thumbnail">' +
	                        '<img>' +
	                        
	                        '</div>'
	                ),
	                $img = $li.find('img');
	        	$li.on('click','.rm-file',function(){
	            var fileId = $(this).parents('.file-item')[0].id
	            uploader.removeFile(fileId,true);
	            $(this).parents('.file-item').remove();
	        });

	        // $list为容器jQuery实例
	        $list.append( $li );
	        
	    }else{
	        $list.find('.file-item').remove();
	        var $li = $(
	                '<div id="' + file.id + '" class="file-item thumbnail">' +
	                '<img>' +
	                '</div>'
	        ),
	        $img = $li.find('img');
			$li.on('click','.rm-file',function(){
		    var fileId = $(this).parents('.file-item')[0].id
		    uploader.removeFile(fileId,true);
		    $(this).parents('.file-item').remove();
	});

	// $list为容器jQuery实例
	$list.remove('img').append( $li );
	    }
	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<span>不能预览</span>');
	            return;
	        }

	        $img.attr( 'src', src );
	    }, 140, 140 );
	});
	uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress span');

	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<p class="progress"><span></span></p>')
	                .appendTo( $li )
	                .find('span');
	    }

	    $percent.css( 'width', percentage * 100 + '%' );
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file ) {
	    $( '#'+file.id ).addClass('upload-state-done');
	});

	 // 文件上传失败，显示上传出错。
	// uploader.on( 'uploadError', function( file ) {
//	     var $li = $( '#'+file.id ),
//	         $error = $li.find('div.error');

//	     // 避免重复创建
//	     if ( !$error.length ) {
//	         $error = $('<div class="error"></div>').appendTo( $li );
//	     }

//	     $error.text('上传失败');
	// });

	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
	    $( '#'+file.id ).find('.progress').remove();
	});
})

</script>